<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Index3</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/face.css">
   
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="js/fabric.js"></script>
    <style type="text/css">
        .image { 
           position: relative; 
           width: 100%; /* for IE 6 */
        }
        h4 { 
           position: absolute; 
           top: 120px; 
           left: 0; 
           width: 100%; 
        }
        h4 span { 
           color: white; 
           font: bold 12px/34px Helvetica, Sans-Serif; 
           letter-spacing: -1px;  
           background: rgb(0, 0, 0); /* fallback color */
           background: rgba(0, 0, 0, 0.5);
           padding: 10px; 
        }
        h4 span.spacer {
           padding:0 5px;
           background: none;
        }
    </style>
</head>
<body>
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
   <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand" href="#">Start Bootstrap</a>                
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">               
                <ul class="nav navbar-nav">                   
                    <li class="dropdown" id="dropdown-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                      <span id="show-id"></span>
                      <span class="caret"></span>
                      </a>
                      <ul class="dropdown-menu" role="menu">
                        <li><a href="#">ข้อมูลส่วนตัว</a></li>
                        <li><a href="#">เปลี่ยนรหัสผ่าน</a></li>
                        <li><a href="#">ข้อมูลการจองสินค้า</a></li>
                        <li class="divider"></li>
                        <li><a href="#">ออกจากระบบ</a></li>
                      </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                  <div class="form-group">
                    <label class="sr-only" for="txt-user-id">User Id</label>
                    <input type="text" class="form-control" placeholder="อีเมลล์" id="txt-user-id" value="sukanya.manee@gmail.com">
                    <label class="sr-only" for="txt-password">Password</label>
                    <input type="password" class="form-control" placeholder="รหัผ่าน" id="txt-password" value="123456">
                  </div>
                  <button type="button" class="btn btn-default" id="btn-signin">เข้าสู่ระบบ</button>
                  <a class="navbar-link" href="#">สมัครสมาชิก</a>
                </form>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <form runat="server">
        <div class="container">
         <div class="row">
            <div class="col-md-3">
            </div>
             <div class="col-md-6">
               
                <button class="btn btn-primary" type="button">ตะกร้าสินค้า<span class="badge"></span>
                </button>

                <div class="row pull-right">
                    <button type="button" class="btn btn-danger" id="btn-addtocart">สั่งจอง</button>
                    <button type="button" class="btn btn-danger" id="btn-capture">แคปรูป</button>
                </div>
            </div>
         </div>
        <div class="row">
            <div class="col-md-3">
                <p class="lead">
                    Shop Name
                </p>
                <div class="list-group" style="overflow-y: auto; max-height: 606px; width: 230px;">
                    <select id="cbo-style" class="form-control" style="width: 210px;">                       
                    </select>
                    <div id="er-list">
                        <div class="image">
                            <img class="img-thumbnail" src="img/earrings/01.jpg" />
                            <h4>A Earrings:<br>Kung Fu Panda</h4>
                        </div>
                        <div class="image">
                            <img class="img-thumbnail" src="img/earrings/01.jpg" />
                            <h4>A Earrings:<br>Kung Fu Panda</h4>
                        </div>
                        <div class="image">
                            <img class="img-thumbnail" src="img/earrings/01.jpg" />
                            <h4>A Earrings:<br>Kung Fu Panda</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row"> 
                    <div class="panel panel-default">                     
                      <div class="panel-body" >
                        
                        <div class="row center-block">
                            <canvas id="c" style="width: 550px; height: 550px;" width="550" height="550">

                            </canvas>                            
                        </div>
                      </div>
                    </div>                  
                </div>               
            </div>
            <div class="col-md-3">
                <div class="list-group" id="list-capture" style="overflow-y: auto; max-height: 606px; width: 230px;">
                </div>
            </div>
        </div>
    </div>
    </form>
    <!-- Page Content -->
    
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>
                        Copyright &copy; Your Website 2015
                    </p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->
    <!-- Bootstrap Core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript" src="js/index3.js"></script>   
    <script type="text/javascript">
        $(window).load(function() {
            $('h4')
                .wrapInner('<span>')

            $('h4 br')
                .before("<span class='spacer'>&nbsp;</span>")
                .after("<span class='spacer'>&nbsp;</span>");
            });
    </script>
</body>
</html>
